<template>
  <div class="sign_wrap">
    <div class="flex mb20 flex_h_between">
      <div class="info_text cursor" @click="back"><a-icon type="left" />返回</div>
    </div>
    <div>
      <a-table size="middle" :columns="columns" :dataSource="list" :scroll="{ x: 1000 }" :key="tableKey">
        <template slot="gender" slot-scope="text, record">
          <p :record="record">{{text === 'male' ? '男' : '女'}}</p>
        </template>
        <template slot="type" slot-scope="text, record">
          <div class="flex flex_column">
            <p :record="record">{{text === 'volunteer' ? '是' : '否'}}</p>
            <!-- <div class="flex flex_h_center flex_v_center mt10" v-if="text === 'volunteer'">
              <span v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">+ <a-input-number style="width:70px" :min="0" :max="20" /> 分&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <a-button type="primary" size="small" @click="submit(record, 'volunteer')" v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">提交</a-button>
            </div> -->
          </div>
        </template>
        <template slot="photo" slot-scope="text, record">
          <div class="flex flex_column">
            <p :record="record">{{ (record.photo && record.photo.content) || '-' }}</p>
            <p v-if="record.photo && record.photo.score" style="font-size:12px;color:#999;">（已为其+{{ record.photo.score }}分）</p>
            <div class="flex flex_h_center flex_v_center mt10" v-if="record.photo && !record.photo.score">
              <span v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">
                + <a-input-number size="small" v-model="record.photo.photoScore" style="width:70px" :min="0" :max="20" /> 分&nbsp;&nbsp;&nbsp;&nbsp;
              </span>
              <a-button type="primary" size="small" @click="submit(record, 'photo')" v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">提交</a-button>
            </div>
          </div>
        </template>
        <template slot="video" slot-scope="text, record">
          <div class="flex flex_column">
            <p :record="record">{{ (record.video && record.video.content) || '-' }}</p>
            <p v-if="record.video && record.video.score" style="font-size:12px;color:#999;">（已为其+{{ record.video.score }}分）</p>
            <div class="flex flex_h_center flex_v_center mt10" v-if="record.video && !record.video.score">
              <span v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">
                + <a-input-number size="small" v-model="record.video.videoScore" style="width:70px" :min="0" :max="20" /> 分&nbsp;&nbsp;&nbsp;&nbsp;
              </span>
              <a-button type="primary" size="small" @click="submit(record, 'video')" v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">提交</a-button>
            </div>
          </div>
        </template>
        <template slot="contribution" slot-scope="text, record">
          <div class="flex flex_column">
            <p v-if="record.contribution">
              <a-icon type="link" class="info_text" />
              <!-- <span class="info_text cursor">{{ record.contribution.fileName}}</span> -->
              <a :href="'/sysFile/download?url=' + record.contribution.content.replaceAll('\\', '/')">{{ record.contribution.fileName}}</a>
            </p>
            <p v-else>-</p>
            <p v-if="record.contribution && record.contribution.score" style="font-size:12px;color:#999;">（已为其+{{ record.contribution.score }}分）</p>
            <div class="flex flex_h_center flex_v_center mt10" v-if="record.contribution && !record.contribution.score">
              <span v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">
                + <a-input-number size="small" v-model="record.contribution.contributionScore" style="width:70px" :min="0" :max="20" /> 分&nbsp;&nbsp;&nbsp;&nbsp;
              </span>
              <a-button type="primary" size="small" @click="submit(record, 'contribution')" v-if="['ROLE_ADMIN', 'ROLE_HRBP'].includes(userInfo.role)">提交</a-button>
            </div>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import moment from 'moment'
import { getCourseDetail, addScore } from '@/api/config'
export default {
  name: 'signList',
  components: { },
  data () {
    return {
      moment,
      list: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          width: 100,
          key: 'name',
          fixed: 'left',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '性别',
          dataIndex: 'gender',
          width: 100,
          key: 'gender',
          scopedSlots: { customRender: 'gender' }
        },
        {
          title: '出生日期',
          dataIndex: 'birth',
          width: 100,
          key: 'birth',
          scopedSlots: { customRender: 'birth' }
        },
        {
          title: '电话',
          dataIndex: 'phone',
          width: 120,
          key: 'phone',
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          width: 150,
          key: 'email',
          scopedSlots: { customRender: 'email' }
        },
        {
          title: '家长姓名',
          dataIndex: 'parentName',
          width: 100,
          key: 'parentName',
          scopedSlots: { customRender: 'parentName' }
        },
        {
          title: '是否志愿者',
          dataIndex: 'type',
          width: 200,
          key: 'type',
          scopedSlots: { customRender: 'type' }
        }
      ],
      tableKey: 1
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  watch: {
  },
  mounted () {
    if (this.$route.query.from === 'upload' && ['ROLE_ADMIN', 'ROLE_HRBP'].includes(this.userInfo.role)) {
      this.columns.push({
        title: '上传照片',
        dataIndex: 'photo',
        width: 200,
        key: 'photo',
        scopedSlots: { customRender: 'photo' }
      },
      {
        title: '上传视频',
        dataIndex: 'video',
        width: 200,
        key: 'video',
        scopedSlots: { customRender: 'video' }
      },
      {
        title: '上传稿件',
        dataIndex: 'contribution',
        width: 200,
        key: 'contribution',
        scopedSlots: { customRender: 'contribution' }
      })
    }
    // if (this.$route.query.from !== 'sign' && ['ROLE_ADMIN', 'ROLE_HRBP'].includes(this.userInfo.role)) {
    //   this.columns.push({
    //     title: '操作',
    //     width: 220,
    //     dataIndex: 'action',
    //     key: 'action',
    //     fixed: 'right',
    //     scopedSlots: { customRender: 'action' }
    //   })
    // }
    this.getList()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    async getList () {
      let res = await getCourseDetail({ id: this.$route.query.id })
      if (res.code === 200) {
        this.list = res.data.campaignUserInfos.map(t => {
          let obj = {}
          if (t.userChildId) {
            obj = { ...t.userChildInfo, parentName: t.userInfo.name, type: t.type }
          } else {
            obj = {
              ...t.userInfo,
              parentName: '-',
              type: t.type,
              userId: t.userId,
              photo: t.campaignExpansionInfos.find(t => t.type === 'photo'),
              video: t.campaignExpansionInfos.find(t => t.type === 'video'),
              contribution: t.campaignExpansionInfos.find(t => t.type === 'contribution')
            }
          }
          return obj
        })
        this.tableKey++
      }
    },
    async submit (record, type) {
      let res = await addScore({ userId: record.userId, score: record[type][type + 'Score'], campaignId: this.$route.query.id, type })
      if (res.code === 200) {
        this.$message.success('操作成功')
        this.getList()
      } else {
        this.$message.error(res.message)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../styles/var.styl'
.sign_wrap
  padding 20px 30px
</style>
